<template>
    <div class="paiming">
        <ModalTitle title="事案件高发类型分析">
            <TimeTab @timeReturnFn="timeReturnFn" />
        </ModalTitle>

        <div class="paiming-box">
            <div class="paiming-box-list" v-for="(item, index) in dataList   " :key="index + 'a'">
                <span>{{ item.name }}</span>
                <div>
                    <p :style="{ width: item.proportion }"></p>
                </div>
                <span>{{ item.value }}</span>
            </div>
        </div>
    </div>
</template>

<script>
import TimeTab from '@/components/TimeTab/Index.vue'
import ModalTitle from '@/components/ModalTitle/Index.vue'
import { ZongHeZhiFaDB } from '@/api/zhangzi'

export default {
    props: {
        type: {
            type: String,
            default: '1'
        }
    },
    components: {
        TimeTab,
        ModalTitle
    },

    data() {
        return {
            dataList: [],
            timeType: 0
        }
    },

    mounted() {
        this.zhongDianShiJianFn();
    },

    methods: {
        timeReturnFn(e) {
            this.timeType = e.value
            this.zhongDianShiJianFn();
        },

        // 重点事件TOP10
        zhongDianShiJianFn() {
            ZongHeZhiFaDB.problemTypeAPI({
                dateType: this.timeType
            }).then(({ success, data, message }) => {
                console.log(data, 'success')
                if (success) {
                    this.dataList = data
                } else {
                    this.$message.error(message)
                }
            })
        },
    }
}
</script>

<style lang="less" scoped>
.paiming {
    width: 100%;
    height: 47.7rem;
    margin-bottom: 2rem;

    .proportion-box {
        justify-content: flex-end;
        margin-top: 1rem;
    }

    .paiming-box {
        width: 100%;
        height: calc(100% - 80px);
        margin-top: 1.6rem;
        overflow: auto;

        .paiming-box-list {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.5rem;

            &:nth-child(1) {
                div {
                    p {
                        background: #FF5A3A;
                    }
                }
            }

            &:nth-child(2) {
                div {
                    p {
                        background: #FFC03A;
                    }
                }
            }

            &:nth-child(3) {
                div {

                    p {
                        background: #53E1FF;
                    }
                }
            }

            span {
                display: inline-block;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #92ACBA;
                line-height: 3rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;

                &:nth-child(1) {
                    // margin-top: 1.5rem;
                    font-size: 1.4rem;
                    width: 7rem;
                }

                &:nth-child(3) {
                    font-size: 1.6rem;
                    width: 2rem;
                }
            }

            div {
                flex: 1;
                height: 1.5rem;
                background: rgba(0, 140, 227, 0.1);
                margin: 0 2rem;

                p {
                    // width: 80%;
                    height: 100%;
                    background: #008CE3;
                }
            }
        }
    }
}
</style>